<template>
  <div class="Details">
    <!-- 商品页面 -->
    <van-nav-bar @click-right="showFen = !showFen" :border='false' style="background-color: rgba(0, 0, 0, 0);" fixed
      left-arrow>
      <template #left>
        <van-button size="small" replace @click="routrgobaek" round type="default" icon="arrow-left">
        </van-button>
      </template>
      <template #right>
        <van-icon name="share-o" size="18" />
      </template>
    </van-nav-bar>
    <van-share-sheet v-model="showFen" title="立即分享给好友" :options="options" />
    <van-image style="width: 100vw;" lazy-load :src="goods_info.img" />
    <van-cell style="font-size: 1.875rem;color: #f2270c;" :title="'￥' + goods_info.price" :border='false' />
    <van-cell style="font-size: 1rem;font-weight: 700;" :title="goods_info.name" :border='false' />
    <van-cell style="font-size: 0.75rem;" :title="goods_info.intro" :border='false' />
    <van-cell style="font-weight: 700;" title="规格" is-link arrow-direction="down" @click="showSkuData = !showSkuData"
      :value="goods_info.name" :border='false' />
    <van-cell style="font-weight: 500;" title="评论" is-link value="暂无评论" :border='false' />
    <van-cell style="font-size: 0.75rem;" :title="goods_info.content" :border='false' />
    <van-sku v-model="showSkuData" :price-tag='goods_info.name' :sku="sku" :goods="goods" @buy-clicked="routrOrder"
      @add-cart="onAddCartClicked" buy-text='确认' />
    <van-goods-action>
      <van-goods-action-icon @click="()=>{this.$toast('客服--功能暂未添加')}" icon="chat-o" text="客服" />
      <van-goods-action-icon to="/Cart" icon="cart-o" text="购物车" />
      <van-goods-action-icon @click="()=>{this.$toast('收藏--功能暂未添加')}" icon="star-o" text="收藏" />
      <van-goods-action-button @click="showSkuData = !showSkuData" type="warning" text="加入购物车" />
      <van-goods-action-button @click="showSkuData = !showSkuData" type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
  import router from '@/router'
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: 'DeTails',
    data() {
      return {
        userToken: localStorage.getItem('userToken') || '',
        showSkuData: false,
        showFen: false,
        options: [{
            name: '微信',
            icon: 'wechat'
          },
          {
            name: '微博',
            icon: 'weibo'
          },
          {
            name: '复制链接',
            icon: 'link'
          },
          {
            name: '分享海报',
            icon: 'poster'
          },
          {
            name: '二维码',
            icon: 'qrcode'
          }
        ],
        sku: {
          tree: [{
            v: [{
              id: '1', // skuValueId：规格值 id
              name: '红色'
            }]
          }],
          price: '1.00', // 默认价格（单位元）
          stock_num: 227, // 商品总库存
          collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
          none_sku: true // 是否无规格商品
        },
        goods: {
          picture: ''
        }
      }
    },
    props: ['id'],
    methods: {
      ...mapMutations(['SET_GOODS_INFO', 'SET_GOODS_ORDER']),
      getGoodsinfo() {
        this.$api.homeData.goods_getinfoo(this.id).then(res => {
          this.SET_GOODS_INFO(res.data)
        })
      },
      async onAddCartClicked(x) {
        if (this.userToken) {
          const res = await this.$api.homeData.goods_cart(this.id, this.userToken, x.selectedNum)
          if (res.status === 201) {
            this.$toast.success('添加成功，在购物车等你！')
          } else {
            this.$toast.fail('添加失败，稍后再来!')
          }
        } else {
          this.$toast('抱歉你还未登录')
          router.push('/Login')
        }
      },
      routrOrder(x) {
        if (this.userToken) {
          const newlist = [{}]
          newlist[0].name = this.goods_info.name
          newlist[0].img = this.goods_info.img
          newlist[0].price = this.goods_info.price
          newlist[0].num = x.selectedNum
          this.SET_GOODS_ORDER(newlist)
          router.push('/Order')
        } else {
          this.$toast('抱歉你还未登录')
          router.push('/Login')
        }
      },
      routrgobaek(x) {
        router.go(-1)
      }
    },
    computed: {
      ...mapState(['goods_info'])
    },
    created() {
      this.getGoodsinfo()
    },
    mounted() {
      setTimeout(() => {
        this.sku.id = this.id
        this.goods.picture = this.goods_info.img
        this.sku.price = this.goods_info.price
        this.sku.stock_num = this.goods_info.stock_num
      }, 500)
    }
  }
</script>

<style>
</style>
